import React, { Component } from 'react'
import moment from 'moment'
import { Card, Row, Col, Badge, Modal, Icon, Spin } from 'antd'
import { Link } from 'react-router-dom'
import 'moment/locale/zh-cn'

const Meta = Card.Meta

moment.locale('zh-cn')

export default class Content extends Component {
  state = { visible: false }

  handleClose = (e) => {
    if (this.player && this.player.pause) {
      this.player.pause()
    }
  }

  handleCancel = (e) => {
    this.setState({
      visible: false
    })
  }

  showModal = () => {
    this.setState({
      visible: true
    })
    const video = 'http://vt1.doubanio.com/201807141725/8b2b9bcc11fc1f3aa220814096bb0020/view/movie/M/402330378.mp4';
    const pic = 'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2526767688.webp';

    if (!this.player) {
        this.player = new DPlayer({
            container: document.getElementsByClassName('videoModal')[0],
            screenshot: true,
            autoplay: true,
            video: {
                url: video,
                pic: pic,
                thumbnails: pic
            }
        })
      } else {
        if (this.player.video.currentSrc !== video) {
          this.player.switchVideo({
            url: video,
            autoplay: true,
            pic: pic,
            type: 'auto'
          })
        }
        // this.player.play()
      }
  }

  _renderContent = () => {
    const { movies } = this.props
    return (
    <div>
        <Row>
          {
            movies.map((it, i) => (
              <Col
                key={i}
                xl={{span: 6}}
                lg={{span: 8}}
                md={{span: 12}}
                sm={{span: 24}}
                style={{marginBottom: '8px'}}
              >
                <Card
                  bordered={false}
                  hoverable
                  style={{ width: '100%' }}
                  // 配置card底部的说明图片和文字部分
                  actions={[
                    <Badge>
                      <Icon style={{marginRight: '2px'}} type='clock-circle' />
                      {moment(it.meta.createdAt).fromNow(true)} 前更新
                    </Badge>,
                    <Badge>
                      <Icon style={{marginRight: '2px'}} type='star' />
                      {it.rate} 分
                    </Badge>
                  ]}
                  cover={<img onClick={this.showModal} src={it.poster} />}
                >
                  <Meta
                    style={{height: '202px', overflow: 'hidden'}}
                    title={<Link to={`/detail/${it._id}`}>{it.title}</Link>}
                    description={<Link to={`/detail/${it._id}`}>{it.summary}</Link>}
                   />
                </Card>
              </Col>
            ))
          }
        </Row>
        <Modal
            className='videoModal'
            footer={null}
            visible={this.state.visible}
            afterClose={this.handleClose}
            onCancel={this.handleCancel}
        >
        </Modal>
    </div>
    )
  }

  render () {
    return (
        this._renderContent()
    )
  }
}
